<template>
  <div>
    <Layout :title="'奈商城'" :active="0">
      <Search></Search>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img :src="require('@/assets/Icon/主页/banner2.jpg')" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img :src="require('@/assets/Icon/主页/banner1.jpg')" alt="">
        </van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>

      <!-- 金刚区 -->
      <van-grid :border="false" class="midNav">
        <van-grid-item :icon="require('@/assets/Icon/主页/home-cat1.png')" text="热销" to="/shopList" />
        <van-grid-item :icon="require('@/assets/Icon/主页/home-cat2.png')" text="新款" to="/shopList" />
        <van-grid-item :icon="require('@/assets/Icon/主页/home-cat3.png')" text="服装" to="/shopList" />
        <van-grid-item :icon="require('@/assets/Icon/主页/home-cat4.png')" text="其他" to="/shopList" />
      </van-grid>

      <!-- 精选推荐 -->
      <div class="recommend">
        <div class="title">
          <img src="@/assets/Icon/主页/Line.png" alt="">
          <span>精选推荐</span>
          <img src="@/assets/Icon/主页/Line-1.png" alt="">
        </div>
        <div class="content-container">
          <Commodity :imgs="imgs" v-for="item in goods" :key="item.goods_id">
            <template #title>
              <div class="Commodity-bot">
                <p class="titleCom">
                  {{ item.goods_name }}
                </p>
                <span class="price-left">
                  ￥{{item.goods_price}}
                </span>
                <span class="price-right">
                  ￥{{item.goods_price}}
                </span>
              </div>
            </template>
          </Commodity>
        </div>
      </div>
    </Layout>
  </div>
</template>

<script>
import Commodity from '@/components/Commodity.vue'
import request from '@/request/request.js'
import Search from '@/components/Search.vue'

export default {
  name: 'Index',
  // 定义属性
  data() {
    return {
      imgs: 'https://bpic.51yuansu.com/pic3/cover/01/55/70/594c83ce7e5b3_610.jpg',
      // 商品页数
      pagenum: 1,
      // 每次请求多少条数据
      pagesize: 10,
      // 商品
      goods: []
    }
  },
  // 方法集合
  methods: {
    async initCommodityList() {
      const { data: res } = await request.get('goods', {
        params: {
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      })
      // console.log(res)
      this.goods = res.data.goods
      // console.log(this.goods)
    },

    // 登录
    async login() {
      const { data: res } = await request.post('login', {
        username: 'admin',
        password: '123456'
      })
      localStorage.setItem('token', res.data.token)
      // console.log(res.data.token)
    }
  },
  components: {
    Commodity,
    Search
  },
  created() {
    this.login()
    this.initCommodityList()
  }
}
</script>

<style lang='less' scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 100px;
  line-height: 400px;
  text-align: center;
  background-color: #39a9ed;
  height: 400px;
  img {
    width: 100%;
    height: 100%;
  }
}
.midNav {
  height: 136px;
}
.recommend {
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 126.75px;
    border-top: 40px solid #efeff4;
    span {
      margin: 0 45px;
      font-size: 30px;
    }
  }
  .content-container {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>